<template>
	<view class="container">
		<view class="address_box" @click="$gourl('/mallPage/address/addressList?isType=select')">
			<view class="address">
				<view class="big">
					<u-icon name="map" color="#40AE36" size="36" style="margin-right: 20rpx;"></u-icon>
					<view v-if="address">{{address.name+' '+address.phone}}</view>
					<view v-else>暂无收货地址</view>
				</view>
				<view class="small">
					<view v-if="address">{{address.province + address.city + address.area + address.detail}}
					</view>
					<view v-else>添加收获地址</view>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
		</view>
		<view class="ztd_box" style="margin-top: 20rpx;background: #fff;padding: 20rpx;">
			<view class="box_top">
				<view></view>
				<view>{{tempCarInfo.total_num}}件商品</view>
			</view>
			<view class="small_info" v-for="(item,index) in tempCarInfo.product" :key="index">
				<image :src="item.product_thumb" mode="aspectFill"></image>
				<view class="infos">
					<view class="name">{{item.product_name}}123</view>
					<view class="sku">{{item.spec_name}}111</view>
					<view class="price"><text class="money">{{item.spec_price}}</text>x{{item.num}}
					</view>
				</view>
			</view>
			<view class="quan_box" v-if="tempCarInfo.coupon && tempCarInfo.coupon.length !== 0">
				<view class="left">
					<view class="zi">券</view>优惠券
				</view>
				<view @click="goSelectCoupon">已减{{couponInfo?couponInfo.price:0}}元<u-icon name="arrow-right"
						style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
			<view class="quan_box">
				<view class="left">
					<view class="zi">积</view>
					<view style="color: #999;">预计购物可获得{{tempCarInfo.score}}积分</view>
				</view>
			</view>
		</view>
		<view class="small_in zj">
			<view class="title"></view>
			<view class="small"> 小计：<text class="price">￥{{totals}}</text></view>
		</view>
		<view class="quan_box small_in" style="margin-top: 20rpx;">
			<view class="left">
				<view class="zi">票</view>
			</view>
			<view @click="$gourl('/otherPage/invoice/invoiceList')">{{invoiceInfo?invoiceInfo.company:'选择发票'}}<u-icon
					name="arrow-right" style="margin-left: 20rpx;"></u-icon></view>
		</view>
		<view class="small_in bz">
			<input type="text" placeholder="备注留言(选填)" v-model="remark">
		</view>
		<view class="footer">
			<view style="font-size: 24rpx;padding-left: 20rpx;">
				合计：<text style="color: #1A8A00;font-weight: bold;">￥<text
						style="font-size: 30rpx;">{{totals}}</text></text>
			</view>
			<view class="pay_bgn" @click="createOrder">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: null,
				totals: 0,
				remark: '',
				ids: [],
				tempCarInfo: [],
				couponInfo: null,
				invoiceInfo: null,
			}
		},
		onLoad(opdata) {
			this.ids = JSON.parse(opdata.ids)
			this.addTempCar()
		},
		onShow() {
			if (getApp().selectAddress) {
				this.address = JSON.parse(getApp().selectAddress)
				this.$forceUpdate()
			}
			if (getApp().selectCoupon) {
				this.couponInfo = JSON.parse(getApp().selectCoupon)
				this.totals = (Number(this.totals) - this.couponInfo.price).toFixed(2)
				console.log(this.totals);
				this.$forceUpdate()
			}
			if (getApp().selectInvoice) {
				this.invoiceInfo = JSON.parse(getApp().selectInvoice)
				this.$forceUpdate()
			}
		},
		methods: {
			goSelectCoupon() {
				getApp().couponList = JSON.stringify(this.tempCarInfo.coupon)
				this.$gourl('/mallPage/couponList')
			},
			async addTempCar() {
				await this.$allApi.creatCarOrder({
					car_id: this.ids
				}).then(res => {
					console.log(res);
					this.tempCarInfo = res.data
					this.totals = this.tempCarInfo.total_fee
				})
			},
			createOrder() {
				console.log(123123);
				if (!this.address) {
					this.$u.toast('请选择收货地址')
					return
				}
				uni.showLoading({
					title: '订单生成中'
				})
				let data = {
					car_id: this.ids,
					address_id: this.address.id,
					coupon_id: this.couponInfo?.coupon_id || null,
					invoice_id: this.invoiceInfo?.id || null,
					remark: this.remark
				}
				this.$allApi.createOrder(data).then(orderRes => {
					uni.hideLoading()
					console.log(orderRes);
					this.$u.toast('下单成功')
					setTimeout(() => {
						this.$gourl('/pages/index/mine', 2)
					}, 1500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.quan_box {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;

		.left {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;

			.zi {
				width: 48rpx;
				height: 48rpx;
				border-radius: 4rpx;
				background: #1A8A00;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #fff;
				margin-right: 20rpx;
			}
		}
	}

	.box_top {
		font-size: 20rpx;
		color: #999;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
	}

	.yuan {
		width: 48rpx;
		height: 48rpx;
		border: 1px solid #aaa;
		border-radius: 50%;
	}

	.container {
		min-height: calc(100vh - 120rpx);
		padding-bottom: 120rpx;
		background: #f6f6f6;
	}

	.address_box {
		// #ifdef MP
		margin-top: 20rpx;
		// #endif
		padding: 20rpx;
		background: #fff;

		.dp {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.address {
			flex: 1;
			margin-right: 20rpx;
			line-height: 1.5;

			.big {
				font-size: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.small {
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.small_info {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		.infos {
			flex: 1;
			padding-left: 20rpx;
			width: 596rpx;
			line-height: 1.8;

			.name {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.sku {
				color: #666;
			}
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;

			.money {
				font-size: 28rpx;
				color: #1A8A00;
			}
		}
	}

	.miaosu {
		font-size: 24rpx;
		color: #999;
	}

	.small_in {
		background: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 20rpx;
		line-height: 80rpx;
		margin-bottom: 1px;

		.small {
			font-size: 26rpx;
		}

		.price {
			font-size: 32rpx;
			font-weight: normal !important;
			color: #333 !important;
		}
	}

	.zj {
		.price {
			color: #1A8A00;
		}
	}

	.bz {
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			text-align: left;
		}
	}

	.mask_box {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.box_title {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		padding: 30rpx 0;
	}

	.pay {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding: 30rpx;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 1px;

		.title {
			font-size: 30rpx;
			// display: flex;
			// align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
		}

		.select {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.footer {
		position: fixed;
		z-index: 99;
		background: #fff;
		width: 100vw;
		height: 120rpx;
		left: 0;
		bottom: 0;
		border-top: 1px solid #eee;
		padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;

		.pay_bgn {
			width: 220rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #40AE36;
		}
	}
</style>